<template>
  <!-- 子导航 -->
  <div class="navigation-from-child">
    <div class="navigation-from-child__header" @click="change">
      子导航列表<i
        class="el-icon-arrow-down el-icon--right"
        :class="{ 'arrow-down-icon-active': show }"
      ></i>
    </div>
    <div v-show="show" class="navigation-from-child__body">
      <template v-if="$util.isDef(datas.children)">
        <div
          v-for="(item, index) in datas.children"
          :key="index"
          class="navigation-from-item border-dashed-bottom"
        >
          <div class="navigation-from-item__header">
            <div class="name">子导航{{ index + 1 }}</div>
            <div class="btn" @click="handleDelete(index)">删除</div>
          </div>

          <div class="navigation-from-item__body">
            <!-- 导航名称 -->
            <el-form-item label="导航名称">
              <el-input
                v-model="item.title"
                type="text"
                placeholder="请输入导航名称"
                size="small"
                maxlength="6"
                show-word-limit
              ></el-input>
            </el-form-item>

            <!-- 导航类型选择 -->
            <el-form-item label="导航类型">
              <el-radio-group v-model="item.data_type">
                <el-radio
                  v-for="type in typeOptions"
                  :key="type.label"
                  :label="type.label"
                  @change="handlerChangeDataType(item)"
                >
                  {{ type.title }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <!-- 导航内容选择 -->
            <el-form-item v-if="item.data_type !== 0" label="导航内容">
              <el-select
                v-if="item.data_type === 1"
                v-model="item.content"
                placeholder="请选择内容"
              >
                <el-option-group v-for="group in contentOptions" :key="group.title" :label="group.title">
                  <el-option v-for="op in group.options" :key="op.value" :label="op.title" :value="op.value" />
                </el-option-group>
              </el-select>
              <el-input
                v-else
                v-model="item.content"
                type="text"
                placeholder="请输入完整链接地址"
                size="small"
              ></el-input>
            </el-form-item>

            <!-- 跳转方式选择 -->
            <el-form-item v-if="item.data_type !== 0" label="跳转方式">
              <el-radio-group v-model="item.blank">
                <el-radio
                  v-for="blank in blankOptions"
                  :key="blank.label"
                  :label="blank.label"
                >
                  {{ blank.title }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </template>
    </div>
    <div class="navigation-from-child__footer">
      <el-button
        plain
        type="primary"
        size="small"
        icon="el-icon-plus"
        @click="handleAdd"
      >
        添加子导航
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavFormItem',
  props: {
    datas: {
      type: Object,
      default: () => {}
    },
    contentOptions: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      show: true,
      typeOptions: [
        {
          label: 1,
          title: '指定内容'
        },
        {
          label: 2,
          title: '链接'
        }
      ],
      blankOptions: [
        {
          label: 1,
          title: '当前页面打开'
        },
        {
          label: 2,
          title: '新标签页打开'
        }
      ]
    }
  },
  methods: {
    change() {
      this.show = !this.show
    },

    // 添加
    handleAdd() {
      if (this.$util.isUndef(this.datas.children)) {
        this.$set(this.datas, 'children', [])
      }
      const length = this.datas.children.length + 1
      const item = {
        id: 1000 + length,
        pid: this.datas.id,
        title: '子导航' + length.toString(),
        content: '',
        data_type: 1,
        blank: 1
      }
      this.datas.children.push(item)
      this.show = true
    },

    // 删除
    handleDelete(index) {
      this.datas.children.splice(index, 1)
      if (this.datas.children.length === 0) {
        this.$delete(this.datas, 'children')
      }
    },
    // 处理更换了导航类型
    handlerChangeDataType(item) {
      item.content = ''
    }
  }
}
</script>

<style scoped lang="scss">
.navigation-from-child {
  margin-top: 20px;
  &__header {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    color: #303133;
    line-height: 16px;
    cursor: pointer;
    i {
      transition: all 0.3s;
    }
    .arrow-down-icon-active {
      transform: rotate(180deg);
      transform-origin: center center;
    }
  }
  &__body {
    .navigation-from-item {
      padding: 20px 0;
      &.border-dashed-bottom {
        border-bottom: 1px dashed #ebeef5;
      }
      &__header {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        .name {
          font-size: 14px;
          font-weight: 500;
          color: #303133;
          line-height: 16px;
        }
        .btn {
          font-size: 14px;
          font-weight: 400;
          color: #5191ff;
          line-height: 16px;
          cursor: pointer;
        }
      }
      .el-form-item:last-child {
        margin-bottom: 0;
      }
    }
  }
  &__footer {
    margin-top: 20px;
    .el-button--primary.is-plain {
      background: transparent;
      border-color: #5191ff;
      display: block;
      width: 100%;
    }
    .el-button--primary.is-plain:focus,
    .el-button--primary.is-plain:hover {
      background: transparent;
      color: #5191ff;
    }
  }
}
</style>
